/** 控件大小 **/
:root[size="large"] {
  /* dialog 相关 */
  --dialog-top: 2vh;
  /* layout相关 */
  --header-height: 60px; // 4em;
  --asider-width: 220px; // 14em;
  --main-menu-width: 80px; // 4.5em;
  --page-tags-height: 44px; // 44px;
  /* 间距相关 */
  --gap-qtr: 4px;
  --gap-half: 8px;
  --gap-half-qtr: 12px;
  --gap: 16px;
  --gap-one-half: 24px;
  --gap-two: 32px;
  /* 边框圆角 */
  --radius-heavyer: 12px;
  --radius-heavy: 10px;
  --radius-main: 8px;
  --radius-light: 6px;
  --radius-lighter: 4px;
  /* 盒子高度 */
  --height-heavy: 48px;
  --height-main: 44px;
  --height-light: 40px;
  /* 字体大小 */
  --font-size-heavyest: 22px;
  --font-size-heavyer: 20px;
  --font-size-heavy: 18px;
  --font-size-main: 16px;
  --font-size-light: 14px;
  --font-size-lighter: 12px;
  /* 盒子阴影 */
  --shadow-heavy: 0 4px 8px rgba(0, 0, 0, 0.24), 0 0 10px rgba(0, 0, 0, 0.08);
  --shadow-main: 0 4px 6px rgba(0, 0, 0, 0.12), 0 0 8px rgba(0, 0, 0, 0.04);
  --shadow-light: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
  --shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
}

:root[size="default"] {
  /* dialog 相关 */
  --dialog-top: 2vh;
  /* layout相关 */
  --header-height: 52px;
  --asider-width: 190px;
  --main-menu-width: 70px;
  --page-tags-height: 38px;
  /* 间距相关 */
  --gap-qtr: 3px;
  --gap-half: 6px;
  --gap-half-qtr: 8px;
  --gap: 12px;
  --gap-one-half: 16px;
  --gap-two: 24px;
  /* 边框圆角 */
  --radius-heavyer: 10px;
  --radius-heavy: 8px;
  --radius-main: 6px;
  --radius-light: 4px;
  --radius-lighter: 2px;
  /* 盒子高度 */
  --height-heavy: 44px;
  --height-main: 40px;
  --height-light: 36px;
  /* 字体大小 */
  --font-size-heavyest: 20px;
  --font-size-heavyer: 18px;
  --font-size-heavy: 16px;
  --font-size-main: 14px;
  --font-size-light: 13px;
  --font-size-lighter: 12px;
  /* 盒子阴影 */
  --shadow-heavy: 0 2px 6px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.08);
  --shadow-main: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
}

:root[size="small"] {
  /* dialog 相关 */
  --dialog-top: 2vh;
  /* layout相关 */
  --header-height: 44px;
  --asider-width: 160px;
  --main-menu-width: 60px;
  --page-tags-height: 30px;
  /* 间距相关 */
  --gap-qtr: 2px;
  --gap-half: 4px;
  --gap-half-qtr: 6px;
  --gap: 8px;
  --gap-one-half: 12px;
  --gap-two: 16px;
  /* 边框圆角 */
  --radius-heavyer: 10px;
  --radius-heavy: 8px;
  --radius-main: 6px;
  --radius-light: 4px;
  --radius-lighter: 2px;
  /* 盒子高度 */
  --height-heavy: 40px;
  --height-main: 36px;
  --height-light: 32px;
  /* 字体大小 */
  --font-size-heavyest: 15px;
  --font-size-heavyer: 14px;
  --font-size-heavy: 13px;
  --font-size-main: 12px;
  --font-size-light: 11px;
  --font-size-lighter: 10Promise下拉数组px;
  /* 盒子阴影 */
  --shadow-heavy: 0 2px 4px rgba(0, 0, 0, 0.24), 0 0 6px rgba(0, 0, 0, 0.08); // 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16),
  --shadow-main: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 4px rgba(0, 0, 0, 0.04); //  0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08),
  --shadow-light: 0 2px 10px 0 rgba(0, 0, 0, 0.1); // 0px 0px 12px rgba(0, 0, 0, 0.12)
  --shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
}
